<template>
  <div class="error-404-view">
    <div class="error-container glass-card">
      <div class="error-illustration">
        <div class="error-number">404</div>
        <div class="error-icon">🔍</div>
      </div>

      <div class="error-content">
        <h1 class="error-title">页面走失了</h1>
        <p class="error-message">
          抱歉，您访问的页面不存在或已被移动。
          <br>
          让我们帮您找到正确的路径！
        </p>

        <div class="error-actions">
          <button class="btn btn-primary" @click="goHome">
            🏠 返回首页
          </button>
          <button class="btn btn-outline" @click="goBack">
            ← 返回上页
          </button>
          <button class="btn btn-outline" @click="searchContent">
            🔍 搜索内容
          </button>
        </div>
      </div>

      <div class="helpful-links">
        <h3>您可能想要访问：</h3>
        <div class="links-grid">
          <router-link class="helpful-link" to="/dashboard">
            <span class="link-icon">📊</span>
            <span class="link-text">控制台</span>
          </router-link>
          <router-link class="helpful-link" to="/media">
            <span class="link-icon">📷</span>
            <span class="link-text">媒体文件</span>
          </router-link>
          <router-link class="helpful-link" to="/diary">
            <span class="link-icon">📝</span>
            <span class="link-text">我的日记</span>
          </router-link>
          <router-link class="helpful-link" to="/settings">
            <span class="link-icon">⚙️</span>
            <span class="link-text">设置</span>
          </router-link>
        </div>
      </div>
    </div>

    <!-- 装饰性背景元素 -->
    <div class="floating-shapes">
      <div class="shape shape-1"></div>
      <div class="shape shape-2"></div>
      <div class="shape shape-3"></div>
      <div class="shape shape-4"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

const goHome = () => {
  router.push('/')
}

const goBack = () => {
  if (window.history.length > 1) {
    router.back()
  } else {
    router.push('/')
  }
}

const searchContent = () => {
  router.push('/search')
}
</script>

<style lang="scss" scoped>
.error-404-view {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: $gradient-primary;
  padding: $spacing-4;
  position: relative;
  overflow: hidden;
}

.error-container {
  text-align: center;
  padding: $spacing-8;
  max-width: 600px;
  width: 100%;
  position: relative;
  z-index: 2;

  .error-illustration {
    margin-bottom: $spacing-8;
    position: relative;

    .error-number {
      font-size: 8rem;
      font-weight: $font-weight-black;
      background: $gradient-primary;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1;
      margin-bottom: $spacing-4;

      @media (max-width: $breakpoint-sm) {
        font-size: 6rem;
      }
    }

    .error-icon {
      font-size: 4rem;
      opacity: 0.8;
      animation: float 3s ease-in-out infinite;
    }
  }

  .error-content {
    margin-bottom: $spacing-8;

    .error-title {
      font-size: $font-size-3xl;
      font-weight: $font-weight-bold;
      color: $gray-800;
      margin-bottom: $spacing-4;

      @media (max-width: $breakpoint-sm) {
        font-size: $font-size-2xl;
      }
    }

    .error-message {
      font-size: $font-size-lg;
      color: $gray-600;
      line-height: 1.6;
      margin-bottom: $spacing-6;

      @media (max-width: $breakpoint-sm) {
        font-size: $font-size-base;
      }
    }

    .error-actions {
      display: flex;
      flex-wrap: wrap;
      gap: $spacing-3;
      justify-content: center;

      @media (max-width: $breakpoint-sm) {
        flex-direction: column;
      }
    }
  }

  .helpful-links {
    border-top: 1px solid rgba($gray-300, 0.3);
    padding-top: $spacing-6;

    h3 {
      font-size: $font-size-lg;
      font-weight: $font-weight-semibold;
      color: $gray-700;
      margin-bottom: $spacing-4;
    }

    .links-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: $spacing-3;

      @media (max-width: $breakpoint-sm) {
        grid-template-columns: 1fr;
      }

      .helpful-link {
        display: flex;
        align-items: center;
        gap: $spacing-3;
        padding: $spacing-4;
        background: rgba(255, 255, 255, 0.3);
        border: 1px solid rgba($gray-300, 0.3);
        border-radius: $radius-lg;
        text-decoration: none;
        color: $gray-700;
        transition: all $duration-normal ease;

        &:hover {
          background: rgba(255, 255, 255, 0.5);
          transform: translateY(-2px);
          border-color: $primary-400;
        }

        .link-icon {
          font-size: $font-size-xl;
        }

        .link-text {
          font-weight: $font-weight-medium;
        }
      }
    }
  }
}

.floating-shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;

  .shape {
    position: absolute;
    border-radius: $radius-full;
    background: rgba(255, 255, 255, 0.1);
    animation: float 6s ease-in-out infinite;

    &.shape-1 {
      width: 120px;
      height: 120px;
      top: 15%;
      left: 10%;
      animation-delay: 0s;
    }

    &.shape-2 {
      width: 80px;
      height: 80px;
      top: 70%;
      right: 15%;
      animation-delay: 2s;
    }

    &.shape-3 {
      width: 60px;
      height: 60px;
      bottom: 25%;
      left: 20%;
      animation-delay: 4s;
    }

    &.shape-4 {
      width: 100px;
      height: 100px;
      top: 40%;
      right: 25%;
      animation-delay: 1s;
    }
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-20px) rotate(120deg);
  }
  66% {
    transform: translateY(10px) rotate(240deg);
  }
}

// 暗色主题
[data-theme="dark"] {
  .error-404-view {
    background: $dark-gradient-primary;

    .error-container {
      background: $dark-glass;
      border-color: $dark-glass-border;

      .error-title {
        color: $gray-200;
      }

      .error-message {
        color: $gray-400;
      }

      .helpful-links {
        h3 {
          color: $gray-300;
        }

        .helpful-link {
          background: rgba(255, 255, 255, 0.05);
          color: $gray-300;
          border-color: $dark-glass-border;

          &:hover {
            background: rgba(255, 255, 255, 0.1);
          }
        }
      }
    }
  }
}
</style>
